<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        爷爷
        <div class="dad">
            父亲
            <div>
                1111
            </div>
            <div>
                2222
            </div>
            <div class="son">
                儿子
            </div>
            <div>
                33333
            </div>
        </div>
    </div>
   <script>
    // 一、父关系；注意：父元素和父节点是一样的，都是元素；
    // var sonEle = document.querySelector(".son");
    // // 1.父元素 parentElement
    // // console.log( sonEle.parentElement);
    // // console.log( sonEle.parentElement.parentElement);
    // // 2.父节点
    // console.log( sonEle.parentNode);

    // 二、兄弟关系
    var sonEle = document.querySelector(".son");
    // 1.下一个元素 nextElementSibling
    // console.log( sonEle.nextElementSibling);
    // 2.下一个节点 
    // console.log(sonEle.nextSibling);
    // 3.上一个兄弟元素
    // console.log(sonEle.previousElementSibling.previousElementSibling);
    // 4.上一个兄弟节点
    console.log(sonEle.previousSibling);




   </script>
</body>
</html>